<template>
  <div class="app-container">
    <h1>教师管理课程学生界面</h1>
    <el-upload class="upload-demo" action="" :on-change="handleUpload" :show-file-list="false" :auto-upload="false">
      <el-button type="primary" size="small" onclick="" style="margin-bottom:20px">批量导入学生</el-button>
    </el-upload>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Name" width="150">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="major" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.major }}</span>
        </template>
      </el-table-column>
      <el-table-column label="grade" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.grade }}</span>
        </template>
      </el-table-column>
      <el-table-column label="college" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.college }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { teacherGetStudent } from '@/api/classes'
import { teacherAddStudent } from '@/api/students'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      tableData: [],
      fileContent: '',
      file: '',
      data: '',
      addData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      console.log(this.$route.query.c_id)
      teacherGetStudent({ c_id: this.$route.query.c_id }).then(response => {
        this.list = response.students
        this.listLoading = false
        console.log(this.list)
      })
    },
    handleUpload(file) {
      this.fileContent = file.raw
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
      if (this.fileContent) {
        if (fileType == 'xlsx' || fileType == 'xls') {
          this.importfile(this.fileContent)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请重新上传！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请上传附件！'
        })
      }
    },
    importfile(obj) {
      const reader = new FileReader()
      const _this = this
      reader.readAsArrayBuffer(obj)
      reader.onload = function() {
        const buffer = reader.result
        const bytes = new Uint8Array(buffer)
        const length = bytes.byteLength
        let binary = ''
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        const XLSX = require('xlsx')
        const wb = XLSX.read(binary, {
          type: 'binary'
        })
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
        this.data = [...outdata]
        const arr = []
        this.data.map(v => {
          const obj = {}
          obj.number = v.number
          obj.name = v.name
          _this.addData.push(obj)
        })
        teacherAddStudent({ c_id: _this.$route.query.c_id, s_ids: _this.addData }).then(response => {
          _this.fetchData()
        })
        _this.addData=[]
        _this.tableData = _this.tableData.concat(arr)
      }
    }
  }
}
</script>

